One of the most ambitious front end projects I have helped developing to date is this brand website for Finnish forestry company Metsä Group. This responsive website features interactive video content and an interface leveraging cutting edge features of HTML5 technologies such as CSS3 animations, SVG animations and HTML5 video.
The front page sets the mood with a bold animated video background. The user is guided to either enjoy a quick overview video or given more browsing options below the fold.
Along the timelines of the different videos interactive content is placed for the user to explore more on the relevant portion of the video.
Cross-device compatibility and a thoughtful user experience was driving the project from the very conception. Here examples of a more streamlined video selection (right) as well as the collapsing menu that animates in from the side of the screen (right).
Aside from the interactive videos the site features a community area where employees, contractors and clients can converse on different parts of Metsä Group's focus areas.
The navigation for switching between videos was based entirely on CSS3 transitions and polyfilled for browsers with limited feature sets.
My role in this project was focused on Front-end development, Back-end development and UX consulting.
Other contributors at agency hasan & partners include:
Account director: Reino Tikkanen
Art direction: Landon Pendlebury
Design direction: Joseph Bayne
Graphic design: Gra Monteleone, Mikko Oksanen, Pol Solsana
Development: Dean Clatworthy, Paula Kreuger
Project management: Emily Reed
